<template>
  <div>
    <div class="vux-demo">
      <img class="logo" src="../assets/vux_logo.png">
      <h1> 登录 </h1>
    </div>
    <form>
      <group>
        <x-input title="账号" placeholder="输入手机号" v-model="username"></x-input>
      </group>
      <group>
        <x-input title="密码" placeholder="输入密码" type="password" v-model="password"></x-input>
      </group>
      <box gap="30px 10px 10px 10px">
        <x-button type="primary" action-type="button" @click.native="doLogin">登录</x-button>
      </box>
      <box gap="10px 10px">
        <x-button type="default" action-type="button">注册</x-button>
      </box>
    </form>
  </div>
</template>

<script>
  import { Group, Cell, Grid, GridItem, XInput, XButton, Box, LoadingPlugin, ToastPlugin } from 'vux'
  import Vue from 'vue'
  Vue.use(LoadingPlugin)
  Vue.use(ToastPlugin)

  export default {
    components: {
      Group,
      Cell,
      Grid,
      GridItem,
      XInput,
      XButton,
      Box
    },
    data () {
      return {
        msg: 'Hello World!',
        username: '',
        password: ''
      }
    },
    methods: {
      doLogin () {
        var usernameVal = this.username
        var passwordVal = this.password
        if (!Object.is(usernameVal, '1')) {
          this.$vux.toast.text('账号不存在')
          return
        }
        if (!Object.is(passwordVal, '1')) {
          this.$vux.toast.text('账号密码不正确')
          return
        }
        this.showLoading()
      },
      showLoading () {
        this.$vux.loading.show({
          text: '正在登录'
        })
        setTimeout(() => {
          this.$vux.loading.hide()
          this.$router.push({
            path: '/home'
          })
        }, 2000)
      }
    }
  }
</script>

<style>
  .vux-demo {
    text-align: center;
  }
  .logo {
    width: 100px;
    height: 100px
  }
</style>
